<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <!-- 
                        onblur="checkUsername()" ：当输入框失去鼠标焦点的时候就会执行的事件onblur绑定的函数checkUsername()
                     -->
                   <input name="username" type="text" id="username" onblur="checkUsername()">
                    <!-- <input name="username" type="text" id="username"> -->
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" onblur="checkPassword()">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel();">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script>

    function checkUsername(){
        let reg=/^\w{6,12} $/;
       // <input name="username" type="text" id="username" onblur="checkUsername()">
      let username=  document.getElementById("username").value;
      if(reg.test(username)){
        document.getElementById("username").style="display:none";
        return true;
      }else{
        document.getElementById("username").style="display:block";
        return false;
      }
    }
    function checkPassword(){
        let reg=/^.{6,12}$/;
       let password= document.getElementById("password").value;
       if(reg.test(password)){
        document.getElementById("password").style="display:none";
        return true;
      }else{
        document.getElementById("password").style="display:block";
        return false;
      }
    }
    function checkTel(){
        let reg=/^.{6,12}$/;
       let password= document.getElementById("checkTel").value;
       if(reg.test(checkTel)){
        document.getElementById("checkTel").style="display:none";
        return true;
      }else{
        document.getElementById("checkTel").style="display:block";
        return false;
      }
      document.getElementById("reg-form").onsubmit=function(){
        return checkUsername && checkPassword && checkTel;
      }
    }
   

</script>
</body>
</html>